<template>
  <div class="main">
    <div class="top">
      <span class="goBack el-icon-back" @click="goBack"> </span>
      <span class="name">{{courseInfo.courseName}} - {{chapterInfo.chapterName}}</span>
      <span class="collect" @click="collecte">
        <i :class="isCollecte == true ? 'el-icon-star-on': 'el-icon-star-off'"></i>
        收藏
      </span>
    </div>
    <div class="play">
      <div class="play-left">
        <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            id="abc"
            :options="playerOptions"
            @timeupdate="onPlayerTimedate($event)"
            @ready='playerReadied($event)'
            @ended="onPlayerEnded($event)"
          ></video-player>
          <!-- @ready='playerReadied($event)'
            @ended="onPlayerEnded($event)" -->
        <div class="loading" v-if="false">
          <img src="/image/loading.gif" alt="" />
          加载中...
        </div>
        <div class="over" v-if="false">
          <div class="finished">
            <p>恭喜您学完该小节</p>
            <p class="nextCourse">下一小节：nextChapter.chapterName</p>
            <button class="over-btn resetLearn">重学一遍</button>
            <button class="over-btn">下一小节</button>
          </div>
          <div class="finished">
            <p>恭喜您学完本课程全部内容</p>
            <button class="over-btn goHome">返回首页</button>
            <button class="over-btn goCourse">返回课程</button>
          </div>
        </div>
      </div>
      <div class="play-right" ref="wrapper">
        <el-tabs tab-position="right">
          <el-tab-pane>
            <div slot="label" class="tabpanel-title">
              <div class="icon"><i class="el-icon-reading"></i></div>
              <p class="text">课程</p>
            </div>

            <div class="course-container">
              <div class="courseName" :title="courseInfo.courseName">
                {{courseInfo.courseName}}
              </div>
              <div class="courseDesc">{{courseDeatil.description}}</div>
              <div class="courseImg">
                <img :src="courseDeatil.courseCover" alt="" />
              </div>
              <div class="teacherRecommend" v-if="courseTeacher !== null ">讲师介绍</div>
              <div class="teacher">
                <div class="teacherAvt">
                  <img :src="courseTeacher.teacherAvatar" alt="" />
                </div>
                <div class="teacherInfo">
                  <div class="teacherName">{{courseTeacher.teacherName}}</div>
                  <div class="teacherTag">{{courseTeacher.tags}}</div>
                </div>
              </div>
              <div class="teacherReacher" v-if="courseTeacher !== null">{{courseTeacher.research}}</div>
            </div>
          </el-tab-pane>
          <el-tab-pane>
            <div slot="label" class="tabpanel-title">
              <div class="icon"><i class="el-icon-data-analysis"></i></div>
              <p class="text">章节</p>
            </div>
            <div class="chapter-container">
              <dl class="list" v-for="(item,index) in chapters" :key='index'>
                <dt :title="item.chapterName">{{item.chapterName}}</dt>
                <dd :class="chapterInfo.id === child.id ? 'active' : ''" v-for="child in item.children" :key="child.id">
                  <div class="video-itemIcon" ref="renderMap(child)">
                    <i class="el-icon-video-camera"></i>
                  </div>
                  <div class="item-name" title="child.chapterName">
                    视频：{{child.chapterName}}
                  </div>
                </dd>
              </dl>
            </div>
          </el-tab-pane>
          <el-tab-pane class="note">
            <div slot="label" class="tabpanel-title">
              <div class="icon"><i class="el-icon-notebook-1"></i></div>
              <p class="text">笔记</p>
            </div>
            <el-empty image="/image/about/course-empt.png"></el-empty>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
  
<script>
    import { playCourse } from '@/common/api/courseManage.js'
    import { addFavorite, deleteFavorite } from '@/common/api/favorite.js'
    import { createToken } from '@/common/api/token.js'
    import { mapState } from 'vuex'
    import { recordHistory,getLastHistoryByChapterId } from '@/common/api/history.js'
    export default {
    data() {
        return {
        tokens: "", //防止重复提交的token
        playerOptions: {
            id: "vue-video-player",
            playbackRates: [0.7, 1.0, 1.5, 1.75, 2.0], //播放速度
            autoplay: false, //如果true,浏览器准备好时开始回放。
            muted: false, // 默认情况下将会消除任何音频。
            loop: false, // 导致视频一结束就重新开始。
            preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: "zh-CN",
            aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            sources: [
            {
                type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: "/1.mp4", //url地址
            },
            ],
            poster: "", //你的封面地址
            // width: document.documentElement.clientWidth, //播放器宽度
            notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: true,
            fullscreenToggle: true, //全屏按钮
            },
        },
        isCollecte: false, //收藏
        courseId: this.$route.params.courseId,
        chapterId: this.$route.params.chapterId,
        memberId: "",
        chapterInfo: {},
        chapters: [],
        courseInfo: {},
        courseDeatil: {},
        courseTeacher: {},
        duration: "",
        count: 0, //多少秒记录一下，用户观看视频的时长
        currentTime: "", //播放时长
        getLastTime: "", //获取的播放时长
        isEnded: false, //判断小节是否学完
        isCourseEnded: false, //判断整部课程是否学完
        indexMap: new Map(),
        maps: new Map(),
        currentChapter: {},
        nextChapter: {},
        };
    },
    created() {
        let width = document.body.clientWidth
        this.playerOptions.aspectRatio = width - 450 + ':600'
        this.playCourse(this.courseId,this.chapterId)
    },
    computed: {
        ...mapState({
            userInfo:(state) => state.user.userInfo
        })
    },
    methods: {
        //请求页面数据
        playCourse(courseId,chapterId){
            console.log(courseId,chapterId,'ididid')
            playCourse(courseId,chapterId).then(res => {
                console.log(res,'播放页面的数据')
                if(res.meta.code == '200'){
                    let playInfoList = res.data.playInfo.playInfoList
                    //给视频播放组件添加地址
                    // 章节信息
                    this.chapterInfo = res.data.chapterInfo
                    //视频封面图地址
                    this.playerOptions.poster = res.data.chapterInfo.chapterLitpic
                    //章节信息
                    this.chapters = res.data.courseInfo.bizCourseChapters
                    //课程信息
                    this.courseInfo = res.data.courseInfo
                    //课程详情
                    this.courseDeatil = res.data.courseInfo.bizCourseDetail
                    //老师的信息
                    this.courseTeacher = res.data.courseInfo.bizCourseTeacher
                    //保存视频时长
                    this.duration = res.data.playInfo.playInfoList[0].duration
                }else if( res.meta.code == '70001' ){
                    this.$message({
                        message:res.data.msg,
                        type:'error'
                    })
                    this.$router.go(-1)
                }
            })
        },
        //返回
        goBack(){
            window.history.go(-1)
        },
        //收藏
        collecte(){
            this.isCollecte = !this.isCollecte
            createToken().then(res => {
                this.tokens = res.data.token
                if( this.isCollecte === true ) {
                    addFavorite({courseId:this.courseId,token:this.tokens}).then(res => {
                        console.log(res,'收藏是否成功？')
                        if(res.meta.code == '200'){
                            this.$message({
                                message:'收藏成功！',
                                type:'success'
                            })
                        }
                    })
                }else{
                    this.isCollecte = !this.isCollecte
                    this.memeberId = this.userInfo.id
                    // console.log(memeberIds,'用户id')
                    deleteFavorite({
                        memberId:this.memeberId,
                        courseId:this.courseId,
                        token:this.tokens
                    }).then(res => {
                        console.log(res,'取消收藏成功？')
                        this.isCollecte = false
                        this.$message({
                            message:'取消收藏成功！',
                            type:'info'
                        })
                    })
                }
            })
        },
        //记录历史播放时长
        onPlayerTimedate(player){
          console.log(player,'666')
          //播放时长
          this.currentTime = player.currentTime
          this.memberId = this.userInfo.id
          recordHistory({
            chapterId: this.chapterId,//章节ID
            courseId: this.courseId,//课程ID
            memberId: this.memberId,//会员ID
            lastTime: this.currentTime//上次观看时间
          })
          // .then(res => {
          //   // console.log(res,'历史时长')
          // })
        },
        //设置视频的进度
        playerReadied(player){
          this.memberId = this.userInfo.id
          getLastHistoryByChapterId({
            chapterId: this.chapterId,//章节ID
            courseId: this.courseId,//课程ID
            memberId: this.memberId,//会员ID
          }).then(res => {
            // console.log(res,'进度')
            if( res.data.data !== null ){
              this.getLastTime = res.data.data.lastTime
              player.currentTime(this.getLastTime)
            }
          })
        },
        //视频播放结束
        onPlayerEnded(player){
          recordHistory({
            chapterId: this.chapterId,//章节ID
            courseId: this.courseId,//课程ID
            memberId: this.memberId,//会员ID
            lastTime: player.cache_.lastTime
          }).then(res=> {
            console.log(res,'视频结束')
            
          })
        }
    },
    };
</script>
  
  <style scoped>
>>> .el-tabs__item {
  padding: unset !important;
  width: 80px !important;
  height: 100px !important;
}

>>> .el-tabs__nav-wrap::after {
  background: unset !important;
}

>>> .el-tabs__active-bar.is-right {
  width: 0 !important;
}

>>> .el-tabs__item.is-active .tabpanel-title {
  background: #25282a !important;
}

>>> .el-tabs__item.is-active .tabpanel-title .icon,
.el-tabs__item.is-active .tabpanel-title .text {
  color: #ffffff;
}

>>> .el-tabs__nav.is-right {
  padding: 20px 0;
  background: #1c1f21 !important;
}

>>> .el-tabs--right,
>>> .el-tabs__content,
>>> .el-tab-pane {
  height: 100%;
}

>>> .vjs-custom-skin > .video-js .vjs-big-play-button {
  background-color: rgba(0, 0, 0, 0.45);
  position: absolute;
  bottom: 60px;
  left: 20px;
  font-size: 3.5em;
  line-height: 2em !important;
  margin-left: unset;
  top: unset;
}

.main {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 80px;
}

.top {
  padding: 0 20px;
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #25282a;
  opacity: 1;
}

.top .goBack {
  font-weight: bold;
  color: #545c63;
  cursor: pointer;
}

.top .name {
  padding: 0 10px;
}

.top .collect {
  cursor: pointer;
  font-size: 16px;
  color: #a8a9ab;
}

.play {
  display: flex;
  background: #25282a;
  padding: 20px;
  height: 600px;
  overflow: hidden;
}

/* 视频播放开始 */
.play-left {
  width: calc(100% - 400px);
  height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
}

.video-js .vjs-icon-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}

/* 视频播放结束 */
/* 播放列表开始 */
.play-right {
  color: #ffffff;
  width: 400px;
  height: 100%;
  /* overflow: scroll;*/
}

.play-right .active {
  background: rgba(255, 255, 255, 0.3);
}

.tabpanel-title {
  padding: 17px 0 18px 0;
  width: 100%;
  text-align: center;
}

.tabpanel-title .icon {
  height: 40px;
  font-size: 30px;
  line-height: 40px;
  color: #a4a5a6;
}

.tabpanel-title .text {
  height: 25px;
  line-height: 25px;
  color: #a4a5a6;
}

.chapter-container {
  height: 100%;
  overflow-y: scroll;
  padding-left: 10px;
}

.chapter-container .list {
  width: 100%;
  margin-bottom: 20px;
}

.list dt {
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
  color: #ffffff;
  opacity: 1;
  padding-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.list dd {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 2px 5px;
  margin: 0 0 5px 0;
  color: #a8a9ab;
  cursor: pointer;
}

.list dd:hover {
  color: #ffffff;
}

.list dd .video-itemIcon {
  height: 30px;
  margin-right: 10px;
  font-size: 18px;
  float: left;
}

.list dd .item-name {
  float: left;
  width: calc(100% - 35px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

/* 播放列表结束 */
.video-player {
  height: 100%;
}

.loading {
  color: #ffffff;
  font-size: 20px;
  margin: 200px auto;
  width: 100px;
  text-align: center;
}

.loading img {
  width: 100%;
}

.finished {
  margin-top: 250px;
}

.over {
  color: #ffffff;
  font-size: 20px;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
}

.over .nextCourse {
  font-size: 24px;
  padding: 10px 0;
  border: none;
}

.over .resetLearn {
  background: rgba(200, 200, 200, 0.3) !important;
}

.goHome,
.goCourse {
  background: rgba(200, 200, 200, 0.3) !important;
}

.over .over-btn {
  width: 120px;
  height: 30px;
  margin: 20px;
  line-height: 30px;
  border-radius: 8px;
  border: 0px;
  outline: none;
  color: #ffffff;
  background: #3585ff;
}

.over .over-btn:hover {
  border: 1px solid #fff;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: rgba(240, 240, 240, 1);
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  border-radius: 10px;
  background-color: rgba(240, 240, 240, 0.5);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  background-color: rgba(240, 240, 240, 0.5);
}

/* 课程开始 */
.course-container {
  height: 100%;
  overflow-y: scroll;
  margin-left: 10px;
  color: #a8a9ab;
}

.course-container .courseName {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  font-weight: bold;
}

.course-container .courseDesc {
  line-height: 25px;
  font-size: 13px;
  margin: 20px 0;
  letter-spacing: 1px;
  text-align: justify;
}

.course-container .courseImg {
  width: 100%;
  height: 150px;
  border-radius: 8px;
}

.course-container .courseImg img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.course-container .teacher {
  display: flex;
  text-align: center;
  justify-content: flex-start;
}

.course-container .teacher .teacherAvt {
  margin: 10px 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.course-container .teacher .teacherAvt img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.course-container .teacherRecommend {
  margin: 15px 0;
  font-size: 16px;
  font-weight: bold;
}

.course-container .teacher .teacherInfo {
  display: flex;
  flex-direction: column;
  margin: 15px 10px;
  text-align: left;
}

.course-container .teacher .teacherName {
  font-weight: bold;
  font-size: 16px;
}

.course-container .teacherTag {
  text-align: left;
  font-size: 13px;
}

.course-container .teacherReacher {
  width: 100%;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 25px;
  text-align: justify;
}

/* 课程结束 */

.note {
  margin-top: 150px;
}
</style>
  